<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { createMap, PointType } from "../methods/index";
import Feature from "ol/Feature";
import { Style } from "ol/style";

const mapBox = ref();

onMounted(() => {
  const map = createMap({
    target: mapBox.value,
  });

  map.drawLines(
    [
      {
        path: "[117.123962,39.130056,116.123962,39.130056,115.123962,39.130056]",
        color: "red",
      },
      {
        path: "[117.123962,38.130056,116.123862,38.130056,115.123962,38.130056]",
        color: "blue",
      },
    ],
    {
      style: {
        sizeFit: true,
        /*  styleFunction: (
          feature: Feature,
          resolution: number,
          style: Style
        ) => {
          const item = feature.get("data");
          const color = item.color;
          style.getStroke()?.setColor(color);

          return style;
        }, */
      },
    }
  );
});
</script>

<template>
  <div ref="mapBox" style="width: 100%; height: 100%"></div>
</template>

<style scoped></style>
